<template>
  <div class="components-container-h">
    <div class="filter-container-h1">
      <el-button-group>
        <el-button class="filter-item" type="primary" @click="patientCreateClick">新增</el-button>
        <el-button class="filter-item" type="">导检</el-button>
        <el-button class="filter-item" type="">身份证照相</el-button>
        <el-button class="filter-item" type="">替查</el-button>
      </el-button-group>
      <el-button-group style="padding-left: 20px">
        <el-button class="filter-item" type="primary" @click="signInClick">签到</el-button>
        <el-button class="filter-item" type="" @click="reservationClick">预约</el-button>
      </el-button-group>
      <el-button-group style="padding-left: 20px">
        <el-button class="filter-item" type="primary">回收指引单</el-button>
        <el-button class="filter-item" type="">满意度</el-button>
      </el-button-group>
      <el-button-group style="padding-left: 20px">
        <el-button class="filter-item" type="primary">删除</el-button>
        <el-button class="filter-item" type="">恢复</el-button>
        <el-button class="filter-item" type="">导出</el-button>
      </el-button-group>
      <el-button-group style="padding-left: 20px">
        <el-button class="filter-item" type="primary">打印条码</el-button>
        <el-button class="filter-item" type="">打印指引单</el-button>
        <el-button class="filter-item" type="">打印告知书</el-button>
        <el-button class="filter-item" type="">打印报告单</el-button>
      </el-button-group>
      <!--      <el-button class="filter-item" type="primary" icon="el-icon-search">检索</el-button>-->
    </div>
    <div class="filter-container-h2">
      <aside style="height: 67px">
        <el-col :span="1">
          <div class="grid-content bg-purple">
            <el-avatar shape="square" :size="50"/>
          </div>
        </el-col>
        <el-col :span="23">
          <div class="grid-content bg-purple">
            体检编号：<strong>{{ this.patientInfo.id }}</strong>
            人员姓名：<strong>{{ this.patientInfo.name }}</strong>
            人员性别：<strong>{{ this.patientInfo.sex }}</strong>
            人员年龄：<strong>{{ this.patientInfo.age }}</strong>
            联系电话：<strong>{{ this.patientInfo.phone }}</strong>
            身份证号：<strong>{{ this.patientInfo.idCard }}</strong>
            体检类别：<strong>{{ this.patientInfo.peType }}</strong>
            体检标签：<strong>{{ this.patientInfo.peTypeCard }}</strong>
            单位名称：<strong>{{ this.patientInfo.workWay }}</strong>
          </div>
          <div class="grid-content bg-purple">
            打印条码：<strong>{{ this.patientInfo.tiaoMa }}</strong>
            检查情况：<strong>{{ this.patientInfo.jianChaQK }}</strong>
            门诊号：<strong>{{ this.patientInfo.clinicCode }}</strong>
            会员卡号：<strong>{{ this.patientInfo.vipCode }}</strong>
            备注：<strong>{{ this.patientInfo.node }}</strong>
            状态：<strong>{{ this.patientInfo.type }}</strong>
            家庭住址：<strong>{{ this.patientInfo.home }}</strong>
          </div>
        </el-col>
      </aside>
    </div>
    <div class="content">
      <div class="content-left">
        <el-scrollbar style="height: 100%">
          <el-input placeholder="请输入内容" class="input-with-select" size="mini" style="padding: 5px 0px">
            <el-button slot="append" icon="el-icon-search"/>
          </el-input>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="社区免费套餐" name="1">
              <div class="el-collapse-item-text" style="color: #2ac06d">血常规（体检）</div>
            </el-collapse-item>
            <el-collapse-item title="费用" name="2"/>
            <el-collapse-item title="进度" name="3">
              <template>
                <el-steps :active="elStepsSign" finish-status="success" style="margin-top: 20px">
                  <el-step title="登记 1"/>
                  <el-step title="预约 2"/>
                  <el-step title="签到 3"/>
                  <el-step title="总检 4"/>
                  <el-step title="完成 5"/>
                </el-steps>
              </template>
            </el-collapse-item>
            <el-collapse-item title="其他信息" name="4">
              <div class="el-collapse-item-text">预约时间:</div>
              <div class="el-collapse-item-text">预约时段:</div>
              <div class="el-collapse-item-text">删除时间:</div>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </div>
      <div class="content-right">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="单位"
            width="120"
          >
            <template slot-scope="scope">{{ scope.row.danWei }}</template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="编码"
            show-overflow-tooltip
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="120"
          />
          <el-table-column
            prop="sex"
            label="男"
            show-overflow-tooltip
          />
          <el-table-column
            prop="age"
            label="年龄"
            show-overflow-tooltip
          />
          <el-table-column
            prop="state"
            label="状态"
            show-overflow-tooltip
          />
          <el-table-column
            prop="taoCan"
            label="套餐"
            show-overflow-tooltip
          />
          <el-table-column
            prop="qianDaoTime"
            label="签到时间"
            show-overflow-tooltip
          />
          <el-table-column
            prop="qianDaoRen"
            label="签到人"
            show-overflow-tooltip
          />
          <el-table-column
            prop="idCard"
            label="身份证号"
            show-overflow-tooltip
          />
          <el-table-column
            prop="node"
            label="备注"
            show-overflow-tooltip
          />
          <el-table-column
            prop="laiYuan"
            label="来源"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>

    <!-- 签到点击弹窗 -->
    <el-dialog
      title="签到"
      :visible.sync="signInDialogVisible"
      width="30%"
    >
      <el-checkbox v-model="signInPrintChecked"/>
      <span>是否直接打印条码和导检单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="signInHandleClose(false)">取 消</el-button>
        <el-button type="primary" @click="signInHandleClose(true)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预约弹窗 -->
    <el-dialog
      title="预约"
      :visible.sync="reservationDialogVisible"
      width="30%"
    >
      <el-checkbox v-model="signInPrintChecked"/>
      <span>是否直接打印条码和导检单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="signInHandleClose(false)">取 消</el-button>
        <el-button type="primary" @click="signInHandleClose(true)">确 定</el-button>
      </span>
    </el-dialog>
    <registerCreate
      ref="refRegisterCreate"
      :visible.sync="createVisible"
      size="calc(100vw - 200px)"
      @okAct="handleOkEdit()"
      @cancelAct="createVisible = false"
    />
  </div>

</template>

<script>
import registerCreate from "./registerCreate"

export default {
  name: 'HealthExaminationRegister',
  components: {registerCreate},
  data() {
    return {
      patientInfo: {
        id: '17656891276354987',
        name: '王富贵',
        sex: '男',
        age: '22岁',
        phone: '13866668888',
        idCard: '22010220231009591X',
        peType: '健康体检',
        peTypeCard: '成人',
        workWay: '社区免费检',
        tiaoMa: '否',
        jianChaQK: '未检查',
        clinicCode: '100000279',
        vipCode: 'vip888',
        node: '此处是备注内容',
        type: '签到',
        home: '翻斗花园'
      },
      activeNames: ['1', '2', '3', '4'],
      elStepsSign: 3,
      tableData: [{
        danWei: '社区免费体检',
        code: '240611100002',
        name: '王小虎',
        sex: '男',
        age: '22岁',
        state: '签到',
        taoCan: '儿保套餐',
        qianDaoTime: '2024-06-11 23:59:20',
        qianDaoRen: '孙悦',
        idCard: '220102202310095911X',
        node: '此处是备注',
        laiYuan: '登记台'
      }, {
        danWei: '社区免费体检',
        code: '240611100033',
        name: '赵二妞',
        sex: '女',
        age: '1岁',
        state: '签到',
        taoCan: '儿保套餐',
        qianDaoTime: '2024-06-11 12:23:10',
        qianDaoRen: '孙悦',
        idCard: '220102202310095911X',
        node: '此处是备注',
        laiYuan: '登记台'
      }],
      multipleSelection: [],
      signInDialogVisible: false,
      signInPrintChecked: true,
      reservationDialogVisible: false,
      reservationChecked: true,
      createVisible: false
    }
  },
  methods: {
    resize() {
      console.log('resize')
    },
    handleChange(val) {
      console.log(val)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    },
    patientCreateClick() {
      this.createVisible = true
    },
    handleOkEdit() {
      this.createVisible = false;
    },
    signInClick() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先选择一名患者！',
          type: 'warning'
        })
        return
      }
      this.signInDialogVisible = true
    },
    reservationClick() {
      /* if(this.multipleSelection.length === 0) {
        this.$message({
          message: '请先选择一名患者！',
          type: 'warning'
        });
        return;
      }*/
      this.reservationDialogVisible = true
    },
    signInHandleClose(b) {
      // 可以在这里处理关闭前的逻辑，例如检查勾选框的状态
      if (b) {
        this.$message({
          message: '签到成功！',
          type: 'success'
        })
        if (this.signInPrintChecked) {
          // 打印条码和导检单
        }
      } else {
        this.$message.error('已取消签到！')
      }
      this.signInDialogVisible = false
    },
    drawerHandleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.components-container-h {
  margin: 17px 23px;
  position: relative;
  height: 77vh;
}

.filter-container-h1 {
  padding-bottom: 2px;

  .filter-item-h {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

.filter-container-h2 {
  height: 70px;
  padding-bottom: 6px;
}

.content {
  width: 100%;
  height: 77vh;
  margin-top: 5px;
  display: grid;
  grid-template-columns: 300px 1fr;
  overflow: auto;

  .content-left {
    width: 100%;
    height: 100%;
    margin-right: 5px;

    .el-collapse-item__header {
      font-size: 16px;
      font-weight: bold;
      background-color: #eef1f6;
    }

    .el-collapse-item-text {
      font-size: 15px;
    }
  }

  .content-right {
    width: 99%;
    height: 100%;
    margin-right: 10px;
  }

}
</style>
